<template>
	<div id="withdrawal">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>提现</p>
		</div>
		<!--<div @click="selectOpen" class="withdrawal_1">
			<p>提现到</p>
			<p>{{selectList[index].card}}</p>
		</div>-->
		<div class="withdrawal_2">
			提现到微信零钱审核到账，手续费按提现金额3%收取。
		</div>
		<div class="withdrawal_3">
			<p>提现金额</p>
			<div class="withdrawal_money">
				<span>¥</span>
				<input type="number" v-model="money" placeholder="输入金额" />
			</div>
			<!--<div class="all_money">
				<p>可用余额¥{{allMoney}}，</p>
				<span @click="all">全部提现</span>
			</div>-->
		</div>
		<ul class="withdrawal_4">
			<li @click="type = 1">
				<div>
					<p>余额</p>
					<span>¥ {{allMoney}}</span>
				</div>
				<img v-if="type == 1" src="../../static/img/yes.png"/>
			</li>
			<li @click="type = 2">
				<div>
					<p>推广金</p>
					<span>¥ {{extendsBlance}}</span>
				</div>
				<img v-if="type == 2" src="../../static/img/yes.png"/>
			</li>
		</ul>
		<div class="forget">
			<p style="color: red;">* 每天只能提现一次</p>
			<router-link to="/user/findPayPw">忘记密码？</router-link>
		</div>
		<input id="sub" @click="payOpen" type="button" value="申请提现" />
		<!--------银行卡列表---------->
		<div @click="selectClose" id="select" v-show="selectSwitch">
			<div class="select">
				<ul class="select_list">
					<li v-for="(item, key) in selectList" @click="selectClose, index = key">
						{{item.card}}
					</li>
				</ul>
				<input @click="selectClose, type=0" class="select_cancel" type="button" value="取消" />
			</div>
		</div>
		<!-------输入密码---------->
		<div id="pay_password" v-show="payPassword">
			<div class="pay_password">
				<div class="password_input">
					<p>支付密码：</p>
					<input type="password" v-model="password" placeholder="首次输入为登录密码" />
				</div>
				<div class="pay_btns">
					<input @click="payClose" type="button" value="取消" />
					<input type="button" @click="checkPwd" value="确定" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'withdrawal',
	data:function(){
		return{
			index: 0,//选中银行卡下标
			money: '',//提现金额
			allMoney: '0',//全部余额
			extendsBlance: 0,//推广金
			type: 1,//提现来源
			selectSwitch: false,//选择菜单开关
			selectList:[{id: '', card: ''}],//账号选择数组
			payPassword: false, // 输入支付密码弹窗
			password: '',//支付密码
			isTodayWithdrawal: false,
			USER_OPENID:'',
		}
	},
	methods:{
		//--------Select相关事件---------
	    selectClose: function(){//关闭选择菜单
	    	this.selectSwitch = false;
	    },
	    selectOpen: function(){//打开选择菜单
	    	this.selectSwitch = true;
	    },
	    //---------全部提现-------------
	    all:function(){
	    	this.money = this.allMoney;
	    },
	    payOpen:function(){//打开支付密码弹窗
	    	var _this = this;
	    	if(_this.isTodayWithdrawal){
	    		_this.$alert("每天只能提现一次");
	    	}else if(_this.money == undefined){
	    		_this.$alert("请输入提现金额");
	    	}else if(_this.money > _this.allMoney&&_this.type==1){
	    		_this.$alert("余额不足");
	    	}else if(_this.money > _this.extendsBlance&&_this.type==2){
	    		_this.$alert("推广金不足");
	    	}else if(_this.money <= 1){
	    		_this.$alert("提现金必须大于1元");
	    	}else{
				this.payPassword = true;
	    	}
		},
		payClose:function(){//关闭支付密码弹窗
			this.payPassword = false;
		},
	    //----------银行卡号前12位加密----------
		encryptionCard:function(str){
			if(str == undefined){
				return;
			}
			var str1 = str.split('');
			var str2 = '';
			$.each(str1,function(i){
				if(i>=12){
					str2 += str1[i];
				}else{
					str2 += '*';
				}
			})
			return str2;
		},
	    //----------银行卡号格式化--------------
		formatBankNo:function(BankNo){
		    if (BankNo == "") return;
		    var account = new String(BankNo);
		    account = account.substring(0,23); /*帐号的总数, 包括空格在内 */
		    if (account.match(".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}") == null){
			      /* 对照格式 */
			    if (account.match(".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}|" + ".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}|" +
			      ".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}|" + ".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}") == null){
			        var accountChar = "";
			        var accountNumeric = accountChar;
			        var i;
			        for (i=0;i<account.length;i++){
			            accountChar = account.substr (i,1);
			        	if ((accountChar != " ")) accountNumeric = accountNumeric + accountChar;
			        }
				        account = "";
				    for (i=0;i<accountNumeric.length;i++){  /* 可将以下空格改为-,效果也不错 */
				        if (i == 4) account = account + " "; /* 帐号第四位数后加空格 */
				        if (i == 8) account = account + " "; /* 帐号第八位数后加空格 */
				        if (i == 12) account = account + " ";/* 帐号第十二位后数后加空格 */
				        if (i == 16) account = account + " ";/* 帐号第十二位后数后加空格 */
				        account = account + accountNumeric.substr (i,1)
			        }
			    }
		    }else{
		    	account = " " + account.substring (1,5) + " " + account.substring (6,10) + " " + account.substring (14,18) + "-" + account.substring(18,25);
		    }
		    if (account != BankNo) return account;
		},
	    /*//---------获取我的银行卡-------------
	    selectMyCard: function(){
	    	var _this = this;
	    	_this.$axios.post("/user/bankCard/getUserCard").then(function(res){
	    		var data = res.data;
	    		if(data.message == "succ"){
	    			data = data.result;
	    			_this.selectList = [];
	    			if(data.length > 0){
		    			for(var i=0; i < data.length; i++){
		    				var cardNum = _this.formatBankNo(_this.encryptionCard(data[i].cardNum));
		    				var id = data[i].id;
		    				var str = cardNum + '(' + data[i].bankName + ')';
		    				_this.selectList.push({id: id, card: str});
		    			}
		    		}else{
		    			_this.$alert("您还未绑定银行卡，是否前往绑定", function(){
		    				_this.$router.push('/user/bankcard');
		    			});
		    		}
	    		}else{
	    			console.log(data.result);
	    		}
	    	}).catch(function(err){
	    		console.log(err);
	    	});
	    	
	    },*/
	    //---------获取我的余额-------------
	    selectBalance: function(){
	    	var _this = this;
	    	_this.$axios.post("/user/wallet/getWalletInfo").then(function(res){
	    		var data = res.data;
	    		console.log(data);
	    		if(data.message == "succ"){
	    			data = data.result;
	    			_this.allMoney = data.balance;
	    			_this.extendsBlance = data.extendsBlance;
            $("#loading").remove();
	    		}else{
	    			console.log(data.result);
	    		}
	    	}).catch(function(err){
	    		console.log(err);
          $("#loading").remove();
	    	});
	    },
	    // ----- 判断今日是否已经提现 -----
	    getIsTodayWith: function(){
	    	var _this = this;
			_this.$axios.post("/user/withdrawals/isTodayWithdrawal").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.isTodayWithdrawal = data.result;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
	    },
	    // ----- 验证支付密码 -----
		checkPwd: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				password: _this.password
			});
			_this.$axios.post("/user/info/checkPayPwd", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					if(data.result){
						_this.withdrawal();
					}else{
						_this.$alert("支付密码有误");
					}
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
	     //---------提现-------------
	    withdrawal: function(){
	    	var _this = this;
	    	_this.$loading();
	    	let postData = _this.$qs.stringify({
	    		cardId: _this.selectList[_this.index].id,
	    		money: _this.money,
	    		type: _this.type,
	    		USER_OPENID:_this.USER_OPENID,
	    	});
	    	_this.$axios.post("/user/withdrawals/withdrawalsByCard", postData).then(function(res){
	    		var data = res.data;
	    		if(data.message == "succ"){
	    			_this.$alert("提现申请已提交，将在1-3个工作日到账");
	    			_this.payPassword = false;
	    			_this.selectBalance();
	    			_this.isTodayWithdrawal = true;
	    			_this.money = ''; 
	    			_this.password = '';
	    			window.local.href="user/balance"
	    		}else{
	    			_this.$alert(data.result);
            _this.payPassword = false;
            _this.password = '';
	    		}
	    		$("#loading").remove();
	    	}).catch(function(err){
		    	console.log(err);
		    });
	    },
	    //-----------获取cookie-------------
		getCookie: function(name){
			var strcookie = document.cookie;//获取cookie字符串
			var arrcookie = strcookie.split("; ");//分割
			//遍历匹配
			for ( var i = 0; i < arrcookie.length; i++) {
				var arr = arrcookie[i].split("=");
				if (arr[0] == name){
				return arr[1];
				}
			}
			return "";
		},
		deleteCookie:function(key){ //删除cookie方法
	        var date = new Date(); //获取当前时间
	        date.setTime(date.getTime()-10000); //将date设置为过去的时间
	        document.cookie = key + "=v; expires =" +date.toGMTString();//设置cookie
        }
	},
	created: function(){
		/*this.selectMyCard();*/
		var _this = this;
		setTimeout(function(){
			_this.selectBalance();
			_this.getIsTodayWith();
		}, 500);
		
		this.USER_OPENID = '';
		this.USER_OPENID = this.getCookie('USER_OPENID');	
		this.deleteCookie('USER_OPENID');
		var _this = this;
		if(this.USER_OPENID==null||this.USER_OPENID==""||this.USER_OPENID=="null"){
			window.open('https://www.ganjinshi.com/gjs_service/wechat/autho/judge','_self');
		}
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#withdrawal{
	height: 100%;
	padding-top: 5rem;
	box-sizing: border-box;
}
.withdrawal_1{
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.withdrawal_1 p:first-child{
	margin-right: 1.5rem;
	color: #787878;
}
.withdrawal_1 p:last-child{
	color: #4F4F4F;
}
.withdrawal_2{
	padding: 0.6rem 1rem;
	box-sizing: border-box;
	color: #FF5656;
	font-size: 1.2rem;
}
.withdrawal_3{
	padding: 1rem;
	box-sizing: border-box;
	background-color: #fff;
}
.withdrawal_3>p{
	color: #4F4F4F;
	font-size: 1.4rem;
	font-weight: 600;
}
.withdrawal_3 .withdrawal_money{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #EEEEEE;
	padding: 0.5rem 0;
	margin-top: 1.5rem;
}
.withdrawal_3 .withdrawal_money span{
	font-size: 1.4rem;
	font-weight: 600;
	color: #4F4F4F;
	margin-right: 1rem;
}
.withdrawal_3 .withdrawal_money input{
	border: none;
	font-size: 1.2rem;
}
.withdrawal_3 .all_money{
	margin-top: 1rem;
	color: #A9A9A9;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
}
.withdrawal_3 .all_money span{
	color: #4D95E4;
	margin-left: 0.5rem;
}
.withdrawal_4{
	background-color: #fff;
	margin-top: 1rem;
	padding: 0 1rem;
	box-sizing: border-box;
}
.withdrawal_4 li{
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
	box-sizing: border-box;
	outline: none;
}
.withdrawal_4 li div{
	font-size: 1.2rem;
	display: flex;
	align-items: center;
}
.withdrawal_4 li:first-child{
	border-bottom: 1px solid #e6e6e6;
}
.withdrawal_4 li div p{
	width: 3.6rem;
	white-space: nowrap;
}
.withdrawal_4 li div span{
	margin-left: 1.5rem;
	color: #FF6565;
	font-size: 1.4rem;
}
.withdrawal_4 li img{
	height: 1.6rem;
	display: block;
}
.forget{
	padding: 0 1rem;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	color: #A9A9A9;
	margin-top: 1rem;
}
#sub{
	width: 80%;
	height: 3rem;
	margin: 0 auto;
	display: block;
	border-radius: 50px;
	background-color: #FF6565;
	color: #FFFFFF;
	font-size: 1.4rem;
	border: none;
	margin-top: 2rem;
}
/*--------银行卡选择-----------*/
#select{
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 11;
}
#select .select{
	width: 100%;
	max-height: 16rem;
	position: fixed;
	bottom: 1rem;
	left: 0;
}
#select .select .select_list{
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	max-height: 12rem;
	width: 94%;
	margin: 0 auto;
	border-radius: 5px 5px 0 0;
	background-color: #fff;
}
#select .select .select_list li{
	width: 100%;
	height: 4rem;
	font-size: 1.2rem;
	color: #787878;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #EEEEEE;
	box-sizing: border-box;
}
#select .select .select_list li.select_active{
	color: #FF6565;
}
#select .select .select_cancel{
	width: 94%;
	display: block;
	margin: 0 auto;
	border-radius: 0 0 5px 5px;
	height: 4rem;
	border: none;
	border-top: 1px solid #EEEEEE;
	background-color: #EEEEEE;
	color: #787878;
	font-size: 1.2rem;
}
#pay_password{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 11;
}
.pay_password{
	width: 90%;
	background-color: #fff;
	border-radius: 3px;
	margin-top: -10%;
	overflow: hidden;
}
.password_input{
	background-color: #F6F6F6;
	color: #4f4f4f;
	display: flex;
	align-items: center;
	height: 6rem;
	justify-content: center;
	font-size: 1.2rem;
}
.password_input input{
	width: 50%;
	height: 3rem;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.pay_btns{
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pay_btns input{
	width: 10rem;
	height: 3rem;
	border-radius: 50px;
	color: #FFFFFF;
	border: none;
}
.pay_btns input:first-child{
	background-color: #CBCBCB;
	margin-right: 5%;
}
.pay_btns input:last-child{
	background-color: #FEAA21;
}
</style>
